<template>
    <view class="content">
        <image src="../static/image/login.png" class="bg"></image>
        <u-navbar title="登录" :background="background" title-size="32" :border-bottom="false" :immersive="true" :is-back="true" back-icon-color="#fff" title-color="#fff" title-width="300"></u-navbar>
        
        <view class="wrapper" :style="{paddingTop: statusBar + 130 + 'px'}">
            <image src="../static/image/logo.png" class="logo"></image>
            <view class="title">信得过的物流运输</view>
            <view class="btn" @click="getUserInfo">授权一键登录</view>
        </view>
		
		<!--  绑定手机  -->
		<u-popup v-model="show" mode="center" border-radius="12" :mask-close-able="false">
			<view class="padding-lr-xl padding-bottom-xl padding-top-lg" style="width: 80vw;">
				<view class="flex align-center flex-direction padding-lr-lg">
					
					<view class="margin-top-sm text-gray text-sm">请继续绑定手机号码</view>
				</view>
				<view class="padding-top">
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="btn text-white text-center text-df bg-green">绑定手机号码</button>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
				show: false,
				code: '',
				user_type: '',
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
			
			if (option.show) {
			    this.show = true
			}
			if (option.user_type) {
			    this.user_type = option.user_type
			}
        },
		onShow() {
		    const _this = this;
		    uni.login({
		    	provider: 'weixin',
		    	success: res => {
					console.log(res)
		    		_this.code = res.code
		    	},
		    	fail(err) {
		    		console.log('登录失败' + JSON.stringify(err))
		    	}
		    })
		},
        methods: {
			// 获取用户微信信息
			getUserInfo() {
				const _this = this;
				// 同意授权
				uni.getUserProfile({
					desc: '登录用于展示您的用户信息',
					success: function(infoRes) {
						console.log(infoRes)
						_this.$ajax('weixin_login', {
							encryptedData: infoRes.encryptedData,
							iv: infoRes.iv,
							code: _this.code,
							user_type: _this.user_type,//1用户 2司机
						}).then(ret => {
							if (ret.success == 1000) {
								uni.setStorageSync('userToken', ret.detail.user_token);
			                    uni.setStorageSync('userInfo', ret.detail);
								uni.setStorageSync('userId', ret.detail.user_id);
			                    uni.setStorageSync('identity', ret.detail.user_type);//身份
								uni.$emit('identityChange')
								uni.$emit('LOGIN')
			                    if (ret.detail.phone) {
			                        uni.setStorageSync('MOBILE', ret.detail.phone);
									if (ret.detail.user_type == 2) {
										// status 0未认证 1待审核 2通过 3驳回
										if (ret.detail.status == 0) {
											_this.$cTo(`/pagesA/apply/apply-1`)
										} else if (ret.detail.status == 1) {
											_this.$cTo(`/pagesA/apply/apply-3`)
										} else if (ret.detail.status == 2) {
											_this.$sTo(`/pages/tabbar/driver`)
										} else if (ret.detail.status == 3) {
											_this.$cTo(`/pagesA/apply/apply-1`)
										}
									} else if (ret.detail.user_type == 3) {
										uni.reLaunch({
											url: '/pagesA/leader/leader'
										});
									} else {
										uni.navigateBack({
											delta: 1
										})
									}
			                    } else {
			                        _this.show = true
			                    }
							} else {
								_this.$toast(ret.message);
							}
						})
					}
				})
			},
			
			// 绑定手机号
			getPhoneNumber(data) {
				const _this = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						console.log(res)
						if (res.code) {
							_this.$ajax('weixin_mobile', {
								encryptedData: data.detail.encryptedData,
								iv: data.detail.iv,
								code:res.code,
								user_token:_this.$getSync('userToken'),
							}).then(ret => {
								if (ret.success == 1000) {
			                        uni.setStorageSync('MOBILE', ret.detail.phone);
									_this.show = false;
									uni.showModal({
										title: '温馨提示',
										content: '绑定成功',
										showCancel: false,
										success: (res) => {
											if (res.confirm) {
												if (_this.$getSync('identity') == 2) {
													// status 0未认证 1待审核 2通过 3驳回
													if (ret.detail.status == 0) {
														_this.$cTo(`/pagesA/apply/apply-1`)
													} else if (ret.detail.status == 1) {
														_this.$cTo(`/pagesA/apply/apply-3`)
													} else if (ret.detail.status == 2) {
														_this.$sTo(`/pages/tabbar/driver`)
													} else if (ret.detail.status == 3) {
														_this.$cTo(`/pagesA/apply/apply-1`)
													}
												} else if (_this.$getSync('identity') == 3) {
													uni.reLaunch({
														url: '/pagesA/leader/leader'
													});
												} else {
													uni.navigateBack({
														delta: 1
													})
												}
											} else if (res.cancel) {
												
											}
										}
									});
								} else {
									_this.$toast(ret.message);
								}
							})
						}
					},
					fail(err) {
						uni.removeStorageSync('userToken')
						uni.removeStorageSync('userInfo')
			            uni.removeStorageSync('userId')
					}
				})
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #091d48;
    }
    
    .bg{
        width: 750rpx;
        height: 1334rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    .wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .logo{
        width: 296rpx;
        height: 91rpx;
    }
    .title{
        font-size: 28rpx;
        color: #858ea0;
        letter-spacing: 5px;
        padding: 20rpx 0 50rpx;
    }
    .btn{
        width: 500rpx;
        height: 95rpx;
        background-color: #99aecb;
        border-radius: 15rpx;
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        line-height: 95rpx;
    }
    
    

</style>
